<script setup>
import {computed, onMounted} from "vue";
import {DFT_ICONS} from "@jzl/icons";

const modelValue = defineModel()

const isDirectColumn = computed(() => {
  let flexDirection = modelValue.value?.flexDirection;
  return flexDirection === 'column' || flexDirection === 'column-reverse';
})
</script>

<template>
  <div class="ele-prop-layout" v-if="modelValue">
    {{ modelValue.width }}--{{ modelValue.height }}=={{ modelValue.left }}+++{{ modelValue.top }}
    <el-radio-group
      v-model="modelValue.display"
      size="mini"
      class="ele-prop-type"
      style="margin-left:-15px;margin-right: -15px;">
      <el-radio-button
        label="default"
        v-tippy="{ arrow: true }"
        content="默认">
        <JIcon :icon="DFT_ICONS.initialize" />
      </el-radio-button>
      <el-radio-button label="none" v-tippy="{ arrow: true }" content="隐藏 none">
        <JIcon :icon="DFT_ICONS.none" />
      </el-radio-button>
      <el-radio-button label="block" v-tippy="{ arrow: true }" content="块级 block">
        <JIcon :icon="DFT_ICONS.block" />
      </el-radio-button>
      <el-radio-button label="flex" v-tippy="{ arrow: true }" content="弹性 flex">
        <JIcon :icon="DFT_ICONS.flex" />
      </el-radio-button>
      <el-radio-button label="inline" v-tippy="{ arrow: true }" content="内联 inline">
        <JIcon :icon="DFT_ICONS.inline" />
      </el-radio-button>
      <el-radio-button label="inline-block" v-tippy="{ arrow: true }" content="行内块 inline-block">
        <JIcon :icon="DFT_ICONS.inlineBlock" />
      </el-radio-button>
    </el-radio-group>

    <el-form
      v-if="modelValue.display === 'flex' || modelValue.display === 'inline-block'"
      label-position="top"
      size="small"
      class="text-left"
    >
      <el-form-item
        label="主轴方向 / flex-direction">
        <el-radio-group
          v-model="modelValue.flexDirection"
        >
          <el-radio-button
            label="row"
            v-tippy
            content="水平 row"
          >
            <JIcon :icon="DFT_ICONS.directionRow" />
          </el-radio-button>
          <el-radio-button
            label="row-reverse"
            v-tippy
            content="逆水平 row-reverse">
            <JIcon :icon="DFT_ICONS.directionRowReverse" />
          </el-radio-button>
          <el-radio-button
            label="column"
            v-tippy
            content="垂直 column">
            <JIcon :icon="DFT_ICONS.directionCol" />
          </el-radio-button>
          <el-radio-button
            label="column-reverse"
            v-tippy
            content="逆垂直 column-reverse"
          >
            <JIcon :icon="DFT_ICONS.directionColReverse" />
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否换行 / flex-wrap">
        <el-radio-group v-model="modelValue.flexWrap">
          <el-radio-button
            label="nowrap"
            v-tippy
            content="不换行 nowrap">
            <JIcon :icon="DFT_ICONS.nowrap" />
          </el-radio-button>
          <el-radio-button
            label="wrap"
            v-tippy
            content="换行 wrap">
            <JIcon :icon="DFT_ICONS.wrap" />
          </el-radio-button>
          <el-radio-button
            label="wrap-reverse"
            v-tippy
            content="换行反向 wrap-reverse">
            <JIcon :icon="DFT_ICONS.wrapReverse" />
          </el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="主轴对齐 / justify-content">
        <el-radio-group v-model="modelValue.justifyContent">
          <el-radio-button
            label="flex-start"
            v-tippy
            content="左对齐 flex-start">
            <JIcon :icon="isDirectColumn ? DFT_ICONS.justifyStartCol : DFT_ICONS.justifyStartRow" />
          </el-radio-button>
          <el-radio-button
            label="flex-end"
            v-tippy
            content="右对齐 flex-end"
          >
            <JIcon :icon="isDirectColumn ? DFT_ICONS.justifyEndCol : DFT_ICONS.justifyEndRow" />
          </el-radio-button>
          <el-radio-button
            label="center"
            v-tippy
            content="居中 center"
          >
            <JIcon :icon="isDirectColumn ? DFT_ICONS.justifyCenterCol : DFT_ICONS.justifyCenterRow" />
          </el-radio-button>
          <el-radio-button
            label="space-between"
            v-tippy
            content="两端对齐 space-between"
          >
            <JIcon :icon="isDirectColumn ? DFT_ICONS.justifyBetweenCol : DFT_ICONS.justifyBetweenRow" />
          </el-radio-button>
          <el-radio-button
            label="space-around"
            v-tippy
            content="平分 space-around">
            <JIcon :icon="isDirectColumn ? DFT_ICONS.justifyAroundCol : DFT_ICONS.justifyAroundRow" />
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="副轴对齐 / align-items">
        <el-radio-group v-model="modelValue.alignItems">
          <el-radio-button
            label="flex-start"
            v-tippy
            content="起点对齐 flex-start"
          >
            <JIcon :icon="isDirectColumn ? DFT_ICONS.alignStartCol : DFT_ICONS.alignStartRow" />
          </el-radio-button>
          <el-radio-button
            label="flex-end"
            v-tippy
            content="终点对齐 flex-end"
          >
            <JIcon :icon="isDirectColumn ? DFT_ICONS.alignEndCol : DFT_ICONS.alignEndRow" />
          </el-radio-button>
          <el-radio-button
            label="center"
            v-tippy
            content="居中 center"
          >
            <JIcon :icon="isDirectColumn ? DFT_ICONS.alignCenterCol : DFT_ICONS.alignCenterRow" />
          </el-radio-button>
          <el-radio-button
            label="baseline"
            v-tippy
            content="第一行文字的基线对齐 baseline"
          >
            <JIcon :icon="isDirectColumn ? DFT_ICONS.alignBaselineCol : DFT_ICONS.alignBaselineRow" />
          </el-radio-button>
          <el-radio-button
            label="stretch"
            v-tippy
            content="占满容器的高度 stretch"
          >
            <JIcon :icon="isDirectColumn ? DFT_ICONS.alignStretchCol : DFT_ICONS.alignStretchRow" />
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="ele-layout-m">
      <div class="ele-layout-p">
        <!--<label>内边距</label>-->
        <input type="text" class="i-top" v-model="modelValue.paddingTop" placeholder="0" v-tippy="{ arrow: true }"
               content="内边距-上"/>
        <input type="text" class="i-right" v-model="modelValue.paddingRight" placeholder="0" v-tippy="{ arrow: true }"
               content="内边距-右"/>
        <input type="text" class="i-bottom" v-model="modelValue.paddingBottom" placeholder="0" v-tippy="{ arrow: true }"
               content="内边距-下"/>
        <input type="text" class="i-left" v-model="modelValue.paddingLeft" placeholder="0" v-tippy="{ arrow: true }"
               content="内边距-左"/>
        <input type="text" class="i-wh" v-model="modelValue.width" v-tippy="{ arrow: true }" content="宽度"
               placeholder="宽度"/>
        <input type="text" class="i-wh" v-model="modelValue.height" v-tippy="{ arrow: true }" content="高度"
               placeholder="高度"/>
      </div>
      <!--<label>外边距</label>-->
      <input type="text" class="i-top" v-model="modelValue.marginTop" placeholder="0" v-tippy="{ arrow: true }"
             content="外边距-上"/>
      <input type="text" class="i-right" v-model="modelValue.marginRight" placeholder="0" v-tippy="{ arrow: true }"
             content="外边距-右"/>
      <input type="text" class="i-bottom" v-model="modelValue.marginBottom" placeholder="0" v-tippy="{ arrow: true }"
             content="外边距-下"/>
      <input type="text" class="i-left" v-model="modelValue.marginLeft" placeholder="0" v-tippy="{ arrow: true }"
             content="外边距-左"/>
    </div>

    <el-input v-model="modelValue.maxWidth" class="mb-1">
      <template #prefix>最大宽度：</template>
    </el-input>

    <el-input v-model="modelValue.minWidth" class="mb-1">
      <template #prefix>最小宽度：</template>
    </el-input>

    <el-input v-model="modelValue.maxHeight" class="mb-1">
      <template #prefix>最大高度：</template>
    </el-input>

    <el-input v-model="modelValue.minHeight" class="mb-1">
      <template #prefix>最小高度：</template>
    </el-input>

    <el-input v-model="modelValue.minHeight" class="mb-1">
      <template #prefix>最小高度：</template>
    </el-input>

    <el-select
      v-model="modelValue.flex"
      placeholder="父元素为 flex 有效"
      filterable
      allow-create
      class="mb-1 w-full"
    >
      <template #prefix>flex：</template>
      <el-option key="auto" label="auto" value="auto"></el-option>
      <el-option key="none" label="none" value="none"></el-option>
      <el-option key="0" label="0" value="0"></el-option>
      <el-option key="1" label="1" value="1"></el-option>
    </el-select>
    <el-form
      label-position="top"
      size="mini"
      class="text-left"
    >
      <el-form-item label="溢出方式 / overflow">
        <el-radio-group
          v-model="modelValue.overflow"
          size="mini"
          class="ele-prop-type"
        >
          <el-radio-button label="visible" v-tippy="{ arrow: true }" content="超出显示 visible">
            <JIcon :icon="DFT_ICONS.overVisible" />
          </el-radio-button>
          <el-radio-button label="hidden" v-tippy="{ arrow: true }" content="超出隐藏 hidden">
            <JIcon :icon="DFT_ICONS.overHidden" />
          </el-radio-button>
          <el-radio-button label="scroll" v-tippy="{ arrow: true }" content="显示滚动条 scroll">
            <JIcon :icon="DFT_ICONS.overScroll" />
          </el-radio-button>
          <el-radio-button label="auto" v-tippy="{ arrow: true }" content="超出自动滚动条 auto">
            <JIcon :icon="DFT_ICONS.overAuto" />
          </el-radio-button>
          <el-radio-button label="inherit" v-tippy="{ arrow: true }" content="与父元素一致 inherit">
            <JIcon :icon="DFT_ICONS.inherit" />
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>
